<template>
  <div class="look-design-drawe-container">
    <el-dialog title="查看设计图纸"
               :visible.sync="dialogVisible"
               width="60%"
               :before-close="handleClose">
      <el-row :gutter="20">
        <el-form ref="requestParam"
                 :model="requestParam"
                 :rules="rules"
                 label-width="80px">
          <el-col :span="24"
                  class="table-box">
            <el-table :data="tableData"
                      :highlight-current-row="true"
                      border
                      :header-cell-style="{ background: '#f5f5f5' }">
              <el-table-column type="index"
                               label="序号"
                               sortable
                               width="100"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="设计图纸"
                               align="center"
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span @click="downOrLookDrawe(scope.row)"
                        class="down-or-look">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="project_paper_version"
                               label="版本号"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-pagination @current-change="handlePageChange"
                           @size-change="handleSizeChange"
                           :current-page="requestParam.page"
                           :page-size="requestParam.page_size"
                           layout="total,sizes,prev, pager, next, jumper"
                           :total="total"
                           align="center">
            </el-pagination>
          </el-col>
          <el-col :span="24"
                  class="bottom-box">
            <el-button type="primary"
                       @click="onSure('requestParam')">确定</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-col>
        </el-form>
        <!-- 查看PDF格式的文件 -->
        <el-dialog title="pdf格式的文件"
                   :visible.sync="dialogVisiblePdf"
                   width="60%"
                   :modal-append-to-body="false"
                   :append-to-body="true"
                   class="drawe-manage-pdf-style"
                   :before-close="onBeforeClose">
          <DialogVisiblePdf :todosPdf="todosPdf"></DialogVisiblePdf>
        </el-dialog>
        <LookImgDialog v-if="lookImgDialog==true"
                       :lookImgDialog.sync="lookImgDialog"
                       :imgUrl.sync="imgUrl"></LookImgDialog>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import DialogVisiblePdf from '../../DraweManagement/components/DialogVisiblePdf';
import LookImgDialog from '../../DeepDesignConfirm/component/LookImgDialog'
import { projectDecomApi, ProDesignDecomApi } from '@/services/ProjectCenter'
export default {
  components: {
    LookImgDialog,
    DialogVisiblePdf
  },
  props: {//传参
    projectId: {
      type: Number,
      default: () => {
        return -1
      }
    },
    lookDesignDraweVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      todosPdf: '',
      dialogVisiblePdf: false,
      lookImgDialog: false,
      imgUrl: '',
      tableData: [],
      dialogVisible: false,
      total: 0,
      requestParam: {
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      rules: {
        ver_no: [
          { required: true, message: '版本号不能为空', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  methods: {
    onBeforeClose (done) {
      this.todosPdf = '';//重置
      done()
    },
    downOrLookDrawe (row) {//下载或查看当前文件
      let picUrl = row.pic_url;//当前点击的文件
      var index = picUrl.lastIndexOf('.') // 获取指定字符串最后一次出现的位置，返回index
      var str = picUrl.substr(index + 1) // substr(start, length) 抽取从start下标开始的length个字符，返回新的字符串
      let judgeIsImg = ['png', 'jpg', 'jpeg'].indexOf(str.toLowerCase()) !== -1;
      let judgeIsPdf = ['pdf'].indexOf(str.toLowerCase()) !== -1;//判断是否为pdf文件
      if (judgeIsImg == true && judgeIsPdf == false) {//图片
        this.imgUrl = picUrl;
        this.lookImgDialog = true;
      } else if (judgeIsPdf == true && judgeIsImg == false) {//非图片直接下载
        this.todosPdf = row.pic_url;
        this.dialogVisiblePdf = true;
      } else {//非图片类型且非pdf类型执行下载
        this.downFile(picUrl, row.name);
      }
    },
    downFile (url, fileName) {//下载文件
      this.$message.warning('正在下载!')
      console.log('fileName=', fileName, fileName.replace(/\s*/g, ""))
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName.replace(/\s*/g, ""); // 自定义文件名
      link.click() // 下载文件
    },
    getWbsDesPaperList () {//查看设计图纸
      ProDesignDecomApi.getWbsDesPaperList({
        params: {
          project_id: this.projectId,
          ...this.requestParam,
        }
      }).then((res) => {
        if (res.data) {
          this.tableData = res.data.list;
          this.total = res.data.total_count;
        }
        console.log('查看设计图纸res=', res)
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSizeChange (size) {//当前显示的最大条数
      this.requestParam.page_size = size;
      this.handlePageChange(1);
    },
    // 分页
    handlePageChange (page) {
      this.requestParam.page = page;
      this.getWbsDesPaperList();
    },
    handleClose (done) {
      this.$emit('update:lookDesignDraweVisible', false)
      this.onCancel();
      this.dialogVisible = false;
      done()
    },
    onCancel () {//取消
      this.$refs.requestParam.resetFields();
      this.$emit('update:lookDesignDraweVisible', false);
    },
    onSure (data) {//确定
      this.onCancel();//取消
    }
  },
  watch: {//监听
    lookDesignDraweVisible (n, o) {
      if (n == true) {
        this.getWbsDesPaperList();//查看设计图纸
      }
      this.dialogVisible = n;
    }
  },
  created () {
    if (this.lookDesignDraweVisible == true) {
      this.getWbsDesPaperList();//查看设计图纸
    };
    this.dialogVisible = this.lookDesignDraweVisible;
  }
}
</script>

<style lang="scss" scoped>
.look-design-drawe-container {
  .bottom-box {
    text-align: center;
    margin-top: 20px;
  }
}
</style>